<template style="background-color: #eaeef2">
    <el-container class="layout-container-demo" style="height: auto">
        <div class="mainPage">
            <div class="toolbar">
                <div class="main-header">
                    <div class="header_left">
                        <div class="companyName" @click="router.push('/main')">西软云医院HIS系统</div>
                        <div class="header-bt">
                            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                                <el-radio-button :label="true">收起</el-radio-button>
                                <el-radio-button :label="false">展开</el-radio-button>
                            </el-radio-group>
                        </div>

                    </div>
                    <div class="header_right">
                        <div class="dropmenu">
                            <el-dropdown @command="handleCommand" trigger="click">
                                  <span class="el-dropdown-link">
                                   张仲景<el-icon class="el-icon--right"><arrow-down/></el-icon>
                                  </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="a">退出登录</el-dropdown-item>
                                        <el-dropdown-item command="a">个人信息</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>

            <!--            <div class="main">-->
            <!--                <div class="page-left">-->
            <!--                    <el-menu-->
            <!--                            default-active="1"-->
            <!--                            router="true"-->
            <!--                            class="el-menu-vertical-demo"-->
            <!--                            :collapse="isCollapse">-->
            <!--                        <el-sub-menu index="1">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <Document/>-->
            <!--                                </el-icon>-->
            <!--                                <span>挂号收费</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="/onsite_registratiion">窗口挂号-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/registration_record">窗口退号-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/expense_charge">收费</el-menu-item>-->
            <!--                                <el-menu-item index="/expense_refund">退费</el-menu-item>-->
            <!--                                <el-menu-item index="/expense_manage">费用记录查询-->
            <!--                                </el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                        <el-sub-menu index="2">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <User/>-->
            <!--                                </el-icon>-->
            <!--                                <span>门诊医生</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="/physician_patient" >患者查看-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/home_medical_record" >-->
            <!--                                    医生诊疗：病历首页-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/check_request" >医生诊疗：检查申请-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/inspection_request">-->
            <!--                                    医生诊疗：检验申请-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="/physician-history" >看诊记录-->
            <!--                                </el-menu-item>-->
            <!--                                <el-menu-item index="2-6">医生诊疗：检查结果</el-menu-item>-->
            <!--                                <el-menu-item index="2-7">医生诊疗：检验结果</el-menu-item>-->
            <!--                                <el-menu-item index="2-8">医生诊疗：门诊确诊</el-menu-item>-->
            <!--                                <el-menu-item index="2-9">医生诊疗：开设处方</el-menu-item>-->
            <!--                                <el-menu-item index="2-10">医生诊疗：处置申请</el-menu-item>-->
            <!--                                <el-menu-item index="2-11">医生诊疗：费用查询</el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                        <el-sub-menu index="3">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <Camera/>-->
            <!--                                </el-icon>-->
            <!--                                <span>检查管理</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="3-1">检查申请</el-menu-item>-->
            <!--                                <el-menu-item index="3-2">患者录入</el-menu-item>-->
            <!--                                <el-menu-item index="3-3">检查结果录入</el-menu-item>-->
            <!--                                <el-menu-item index="3-4">检查管理</el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                        <el-sub-menu index="4">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <Headset/>-->
            <!--                                </el-icon>-->
            <!--                                <span>检验管理</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="4-1">检验申请</el-menu-item>-->
            <!--                                <el-menu-item index="4-2">患者录入</el-menu-item>-->
            <!--                                <el-menu-item index="4-3">检验结果录入</el-menu-item>-->
            <!--                                <el-menu-item index="4-4">检验管理</el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                        <el-sub-menu index="5">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <Wallet/>-->
            <!--                                </el-icon>-->
            <!--                                <span>药房管理</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="5-1">药房发药</el-menu-item>-->
            <!--                                <el-menu-item index="5-2">药房退药</el-menu-item>-->
            <!--                                <el-menu-item index="5-3">药库管理</el-menu-item>-->
            <!--                                <el-menu-item index="5-4">交易记录</el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                        <el-sub-menu index="6">-->
            <!--                            <template #title>-->
            <!--                                <el-icon>-->
            <!--                                    <FirstAidKit/>-->
            <!--                                </el-icon>-->
            <!--                                <span>处置管理</span>-->
            <!--                            </template>-->
            <!--                            <el-menu-item-group>-->
            <!--                                <el-menu-item index="6-1">处置申请</el-menu-item>-->
            <!--                                <el-menu-item index="6-2">患者录入</el-menu-item>-->
            <!--                                <el-menu-item index="6-3">处置录入</el-menu-item>-->
            <!--                                <el-menu-item index="6-4">处置管理</el-menu-item>-->
            <!--                            </el-menu-item-group>-->
            <!--                        </el-sub-menu>-->
            <!--                    </el-menu>-->
            <!--                </div>-->
            <!--                <div class="page-right">-->
            <!--                    <router-view></router-view>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="main">
                <div class="page-left">
                    <el-menu
                            default-active="1"
                            router="true"
                            class="el-menu-vertical-demo"
                            :collapse="isCollapse">

                        <el-sub-menu v-for="(item,i) in fatherRoute.options.routes" :key="i" :index="''+i"
                                     v-show="!item.appHide">
                            <template #title>
                                <el-icon>
                                    <component :is="item.myIcon"/>

                                </el-icon>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="child in item.children" :index="child.path">{{ child.name }}
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </div>
                <div class="page-right">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </el-container>

</template>
<script setup>
import {ref} from 'vue'
import {
    Document,
    User,
    Camera,
    Headset,
    Wallet,
    FirstAidKit,
    ArrowDown
} from '@element-plus/icons-vue'
import router from "../router/index.js";
import {useRoute, useRouter} from "vue-router";

const isCollapse = ref(false)
const fatherRoute = useRouter()
console.log(fatherRoute.options.routes)
</script>

<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.layout-container-demo .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.mainPage {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.main {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.page-right {
    width: 100%;
    height: auto;
}

.companyName {
    font-size: 3vw;
    color: #2073fe;
}

.main-header {
    background-color: #cbe1fc;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header_left {
    display: flex;
    align-items: center;
}

.header-bt {
    margin-left: 1vw;
    margin-top: 1.1vw;
}

.header_right {
    width: 8vw;
    display: flex;
    align-items: center;
}

</style>